<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大话西游</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 背景设置 */
        .bgimg {
            height: 100vh;
            background-image: url(./大话西游/background.jpg);
            /* background-size: 100% 100%; */
            animation: bg 30s linear infinite;
        }

        /* 背景动画 */
        @keyframes bg {
            to {
                background-position: 1920px 0;
            }
        }

        /* 放置角色的框 */
        .role {
            /* border: 1px solid red; */
            /* display: flex;
            justify-content: center;
            align-items: flex-end; */
            position: relative;
            top: 50%;
            overflow: hidden;
        }

        /* 角色整体设置 */
        .role>* {
            width: 200px;
            height: 180px;
            /* border: 1px solid blue; */
            animation: walk 1s steps(8) infinite;
            position: fixed;
            top: 50%;

        }

        /* 悟空 */
        .wk {
            z-index: 4;
            background-image: url(./大话西游/wk.png);
            left: 20%;
        }

        /* 八戒 */
        .bj {
            z-index: 3;

            background-image: url(./大话西游/bj.png);
            left: 40%;
            top: 53%;
        }

        /* 唐僧 */
        .ts {
            z-index: 2;
            background-image: url(./大话西游/ts.png);
            width: 170px;
            height: 215px;
            animation: ride 1s steps(8) infinite;
            left: 43%;
            top: 47%;

        }

        /* 沙僧 */
        .ss {
            z-index: 1;
            background-image: url(./大话西游/ss.png);
            width: 210px;
            height: 190px;
            animation: sswalk 1s steps(8) infinite;
            left: 50%;

        }

        /* 动画 */
        @keyframes walk {
            to {
                background-position: -1600px 0;
            }
        }

        @keyframes ride {
            to {
                background-position: -1360px 0;
            }
        }

        @keyframes sswalk {
            to {
                background-position: -1680px 0;
            }
        }
    </style>
</head>

<body>
    <div class="bgimg">
        <div class="role">
            <div class="wk">

            </div>
            <div class="bj">

            </div>
            <div class="ts">

            </div>
            <div class="ss">

            </div>
        </div>
    </div>


</body>

</html>